<template>
    <view class="container">
        <view class="ui-all">
            <view class="avatar">
                <button class="imgAvatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
                    <view class="iavatar" :style="'background: url('+avatar+') no-repeat center/cover #eeeeee;'"></view>
                </button>
                <!-- <text v-if="avatar">修改头像</text> -->
                <text>点击头像获取微信头像</text>
            </view>
            <view class="ui-list">
                <text>昵称</text>
                <input type="nickname" :placeholder="value" :value="nickName" @blur="bindnickName"
                    placeholder-class="place" />
            </view>
            <view class="ui-list">
                <text>手机号</text>
                <input v-if="mobile" disabled type="tel" :placeholder="value" :value="mobile" @input="bindmobile"
                    placeholder-class="place" />
                <button v-if="!mobile" open-type="getPhoneNumber" @getphonenumber="getphonenumber"
                    class="getInfo bun">授权手机号</button>
            </view>
            <button class="save" @tap="savaInfo">保 存 修 改</button>
        </view>

    </view>
</template>

<script>
    import cfg from '@/common/config.js'
    export default {

        data() {
            return {
                value: '请填写',
                sex: [{
                    id: 1,
                    name: '男'
                },{
                    id: 2,
                    name: '女'
                }],
                index: 0,
                region: ['请填写'],
                date: '请填写',
                avatar: '',
                description: '',
                url: '',
                nickName: '',
                mobile: '',
                headimg: ''

            }

        },
        mounted() {
            this.loadUser()
        },
        methods: {
            onChooseAvatar(e) {
                var t = this
                this.avatar = e.detail.avatarUrl
                const tempUrl = e.detail.avatarUrl || '';
                let fileName = tempUrl.split('/').pop();  // 获取文件名
                let userId = this.f.storage('user_data').userId;
                const filePath = userId + '/' + fileName;  // 在文件名前加上 userId

                uni.uploadFile({
                    url: cfg.url + '/infra/file/upload',
                    filePath: tempUrl,  // 选中的图片路径
                    header: {
                        'tenant-id': '1',  // 替换成实际的 tenant-id
                        'Authorization': this.f.storage('userToken'),  // 替换成实际的 token
                    },
                    name: 'file',
                    formData: {
                        path: filePath  // 将新的路径传递给后台
                    },
                    success: (uploadRes) => {
                        console.log(uploadRes);

                        let data = JSON.parse(uploadRes.data);  // 解析上传后的响应数据
                        console.log(data.data);

                        if (data.code === 0) {
                            t.avatar = data.data
                        } else {
                            uni.showToast({
                                title: '上传失败',
                                icon: 'none'
                            });
                        }
                    },
                    fail: (error) => {
                        console.log(error);

                        uni.showToast({
                            title: '上传出错',
                            icon: 'none'
                        });
                    }
                });

            },
            async loadUser() {
                try {
                    const res = await this.$api.req('/station/member/get',{},'get','JSON',false);
                    if (res.code === 0 && res.data) {
                        const userData = res.data;
                        // 映射接口数据到页面绑定变量
                        this.nickName = userData.nickname || '请填写';
                        this.avatar = userData.avatar || this.avatar;
                        this.mobile = userData.mobile || '';
                        this.index = userData.sex || 0; // 根据性别，0为未知，1为男，2为女
                    } else {
                        uni.showToast({
                            title: res.msg || '加载用户数据失败',
                            icon: 'none',
                            duration: 2000
                        });
                    }
                } catch (error) {
                    console.error(error);
                    uni.showToast({
                        title: '网络错误，请稍后再试',
                        icon: 'none',
                        duration: 2000
                    });
                }
            },

            bindnickName(e) {
                console.log(e);

                this.nickName = e.detail.value;

            },

            savaInfo() {
                let that = this;
                let nickname = that.nickName;
                let avatar = that.avatar;

                let updata = {};
                if (!nickname) {
                    uni.showToast({
                        title: '请填写昵称',
                        icon: 'none',
                        duration: 2000
                    });
                    return;
                }
                updata.nickname = nickname;
                updata.avatar = avatar;

                that.updata(updata);
            },
            isPoneAvailable(poneInput) {
                var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
                if (!myreg.test(poneInput)) {
                    return false;
                } else {
                    return true;
                }
            },
            async updata(datas) {
                //传后台
                var t = this
                t.$api.req(`/member/user/update`,
                    datas,
                    'PUT',"JSON",false).then(res1 => {
                        if (res1.data) {
                            this.loadUser()
                            uni.showToast({
                                title: '修改成功',
                                icon: 'none',
                                duration: 1000
                            });
                        }
                    });
            },

        },
        onLoad() {
        }

    }
</script>

<style lang="scss">
    .container {
        display: block;
    }

    .ui-all {
        padding: 20rpx 40rpx;

        .avatar {
            width: 100%;
            text-align: left;
            padding: 20rpx 0;
            border-bottom: solid 1px #f2f2f2;
            position: relative;

            .imgAvatar {
                width: 140rpx;
                height: 140rpx;
                border-radius: 50%;
                display: inline-block;
                vertical-align: middle;
                overflow: hidden;

                .iavatar {
                    width: 100%;
                    height: 100%;
                    display: block;
                }
            }

            text {
                display: inline-block;
                vertical-align: middle;
                color: #8e8e93;
                font-size: 28rpx;
                margin-left: 40rpx;
            }

            &:after {
                content: ' ';
                width: 20rpx;
                height: 20rpx;
                border-top: solid 1px #030303;
                border-right: solid 1px #030303;
                transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                /* IE 9 */
                -moz-transform: rotate(45deg);
                /* Firefox */
                -webkit-transform: rotate(45deg);
                /* Safari 和 Chrome */
                -o-transform: rotate(45deg);
                position: absolute;
                top: 85rpx;
                right: 0;
            }
        }

        .ui-list {
            width: 100%;
            text-align: left;
            padding: 20rpx 0;
            border-bottom: solid 1px #f2f2f2;
            position: relative;

            text {
                color: #4a4a4a;
                font-size: 28rpx;
                display: inline-block;
                vertical-align: middle;
                min-width: 150rpx;
            }

            input {
                color: #030303;
                font-size: 30rpx;
                display: inline-block;
                vertical-align: middle;
            }

            button {
                color: #030303;
                font-size: 30rpx;
                display: inline-block;
                vertical-align: middle;
                background: none;
                margin: 0;
                padding: 0;

                &::after {
                    display: none;
                }
            }

            picker {
                width: 90%;
                color: #030303;
                font-size: 30rpx;
                display: inline-block;
                vertical-align: middle;
                position: absolute;
                top: 30rpx;
                left: 150rpx;
            }

            textarea {
                color: #030303;
                font-size: 30rpx;
                vertical-align: middle;
                height: 150rpx;
                width: 100%;
                margin-top: 50rpx;
            }

            .place {
                color: #999999;
                font-size: 28rpx;
            }
        }

        .right:after {
            content: ' ';
            width: 20rpx;
            height: 20rpx;
            border-top: solid 1px #030303;
            border-right: solid 1px #030303;
            transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            /* IE 9 */
            -moz-transform: rotate(45deg);
            /* Firefox */
            -webkit-transform: rotate(45deg);
            /* Safari 和 Chrome */
            -o-transform: rotate(45deg);
            position: absolute;
            top: 40rpx;
            right: 0;
        }

        .save {
            background: $uni-btn-color;
            border: none;
            color: #ffffff;
            margin-top: 40rpx;
            font-size: 28rpx;
        }
    }
</style>